<template>
	<view class="ShopCar">
		<movable-area class="movableArea" v-if="isShow">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend">
				<view class="icon-box" @click="handleIcon()">
					<text class="txt">搜索</text>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>
 
<script>
	export default {
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			},
		},
		data() {
			return {
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				isShow: false
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					this.$nextTick(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
						this.isShow = true
					})
				}
			})
		},
 
		methods: {
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				this.$nextTick(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
				})
			},
			handleIcon() {
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 0,
				// });
			}
		},
	}
</script>
 
<style lang="scss" scoped>
	.ShopCar {
		.movableArea {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
			z-index: 999;
 
			.movableView {
				width: 116rpx;
				height: 116rpx;
				pointer-events: auto;
				padding: 0 30rpx;
 
				.icon-box {
					width: 100%;
					height: 100%;
					background: url('@/static/img/car/search.png') no-repeat no-repeat center/ 100% 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					
					box-sizing: border-box;
					border-radius: 50%;
					.txt {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #2E87FF;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						position: relative;
						left: 0rpx;
						top: 22rpx;
					}
					
					// animation: iconBox 5s linear infinite; //进行旋转
				}
 
				@keyframes iconBox {
					0% {
						-webkit-transform: rotate(0deg);
					}
 
					25% {
						-webkit-transform: rotate(90deg);
					}
 
					50% {
						-webkit-transform: rotate(180deg);
					}
 
					75% {
						-webkit-transform: rotate(270deg);
					}
 
					100% {
						-webkit-transform: rotate(360deg);
					}
				}
 
			}
		}
	}
</style>